<template>
	<view class="u-wrap">
		<view class="u-menu-wrap bg-white">
			<view class="mt-5 text-center w-100" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view class="list" v-else>
				<!-- 左边菜单栏  -->
				<scroll-view  scroll-y scroll-with-animation class="u-tab-view menu-scroll-view bg-light-secondary" :scroll-top="scrollTop">
					
					<view v-if="item.is_show" v-for="(item,index) in oneClazz" :key="index" class="u-tab-item"  :class="[item.icon_show&&current===index? 'u-tab-item-active' : '']"
					@tap.stop="terrace_add(item,index)">{{item.cat_name}}</view>
				</scroll-view>	
				
				<!-- 右边内容  -->
				<view class="flex-1">
					<scroll-view scroll-y="true" >
						<view class="px">
							<view class="thumb-box" v-if="subCatId == item.parent_id&&item.is_show" v-for="(item, index) in twoClazz" :key="index" :data-current="index"  @click="terrace_level(item, index)">
								<!-- 二级  -->
								<view class="item-menu-name py-3 pl-3" :class="[twoClazzIndex===index&&item.icon_show? 'u-tab-item-active' : '']">{{item.cat_name}}</view>
								<!-- 三级 -->
								<view  class="d-flex bg-light-secondary j-sb px-2 py-2 flex-wrap">
									<block v-if="terraceClazz.find(v=> v.parent_id == item.cat_id) != undefined">
									<view class="three bg-white rounded-50 my-2 flex-wrap" v-if="item.cat_id==tabItem.parent_id&&tabItem.is_show" v-for="(tabItem,tabIndex) in terraceClazz" :key="tabIndex" >
										<view  class=" py-1 text-center rounded-50 border" :class="[sanIndex===tabIndex &&item.icon_show ? 'active_san' : '']" @click.stop="terrace_three(tabItem,tabIndex,item)">
											{{tabItem.cat_name}}
										</view>
									</view>	
									</block>
									<block v-else>
										<view v-if="item.is_show" class="three bg-white rounded-50 my-2 flex-wrap">
											<view  class=" py-1 text-center rounded-50 border" :class="[sanIndex===index &&item.icon_show ? 'active_san' : '']" @click.stop="terrace_three(item,index)">
												{{item.cat_name}}
											</view>
										</view>	
									</block>
								</view>	
							</view>
						</view>				
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				terraceClazz:[], // 全部列表
				oneClazz:[], // 1级平台分类
				twoClazz:[], // 2级平台分类
				threeClazz:[], // 3级平台分类
				current:0,  // 标识符tab
				twoClazzIndex:0, // 二级标识符
				sanIndex:0, // 三级标识符
				subCatId:"", // cat_id标识符
				threeCatId:"", // 二级cat_id
				cat_name:"", // 公共name
				tabIndex:'',
				u_loadmore:true, // 加载中
			}
		},
		onLoad(e) {
			this.subCatId=1
			this.$H.post("admin/merchant/goods/category").then(res=>{
				this.terraceClazz=res.data
				this.u_loadmore=false 
				this.terraceClazz.filter(v=>{
						return v.icon_show=false
				})
				// 一级
				this.oneClazz=this.terraceClazz.filter((item,index)=>{
					if(item.parent_id==0){
						return item
					}
				})
				// 二级
				this.twoClazz=this.terraceClazz.filter((item,index)=>{
					if(this.subCatId==item.parent_id){
						return item
					}
				})
				
				let addclass={
					cat_id:this.terraceClazz[0].cat_id,
					cat_name:this.terraceClazz[0].cat_name
				}
				var globalData = getApp().globalData.clazz; //获取全局变量
				getApp().globalData.clazz= addclass; //修改全局变量
				console.log(2)
			})
		},
		methods: {
			// 平台展开 收起 一级
			terrace_add(items,indexs){
				this.current=indexs
				if(this.current==indexs){
					items.icon_show=true
				}
				this.subCatId=items.cat_id
				this.twoClazz=this.terraceClazz.filter((item,index)=>{
					if(items.cat_id==item.parent_id){
						return item
					}
				})
				let addclass={
					cat_id:items.cat_id,
					cat_name:items.cat_name
				}
				var globalData = getApp().globalData.clazz; //获取全局变量
				getApp().globalData.clazz= addclass; //修改全局变量
			},
			// 平台二级列表
			terrace_level(tabItem,tabIndex){
				
				this.twoClazzIndex=tabIndex
				if(this.twoClazzIndex==tabIndex){
					tabItem.icon_show=true
				}
				console.log(tabIndex)
				let addclass={
					cat_id:tabItem.cat_id,
					cat_name:tabItem.cat_name
				}
				this.threeCatId=tabItem.cat_id
				var globalData = getApp().globalData.clazz; //获取全局变量
				getApp().globalData.clazz= addclass; //修改全局变量
			},
			// 三级列表
			terrace_three(tabItem,tabIndex,item){
				if(this.sanIndex==tabIndex){
					this.sanIndex=-1
				}else{
					this.sanIndex=tabIndex
					if(this.sanIndex==tabIndex){
						tabItem.icon_show=true
					}else if(this.sanIndex!==tabIndex){
						tabItem.icon_show=false
					}
				}
				let addclass={
					cat_id:tabItem.cat_id,
					cat_name:tabItem.cat_name
				}
				var globalData = getApp().globalData.clazz; //获取全局变量
				getApp().globalData.clazz= addclass; //修改全局变量
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}
	page{
		background-color: #FFFFFF;
	}
	.u-search-box {
		padding: 18upx 30upx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-tab-view {
		width: 30%;
		height: 100vh;
	}

	.u-tab-item {
		height: 90upx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}
	
	.u-tab-item-active {
		color: #CB666A;
	}
	
	.u-tab-view {
		height: 100%;
	}
		
	.thumb-box {
		display: flex;
		flex-direction: column;
	}
	.collapse-item {
		color: red;
		padding-bottom: 10px;
	}
	.active_san{
		background-color: #F1C9D0;
		color: #F34841;
		border: none!important;
	}
	.px{
		height: 100vh;
	}
	
	.list {
		display: flex;
		width: 100%;
	}
	
	.list-item {
		flex: 1;
	}
	
	.three{
		width: 48%;
	}
	
</style>
